<template>
  <div class="input-list-box">
    <!--标题-->
    <span class="input-list-title">{{ inputTitle }}</span>
    <!--输入框-->
    <div class="input-list-constant">
      <!--输入数据列表-->
      <div v-for="(item, index) in inputDataList" :key="index" class="input-data-list">
        <span>{{ item.text }}</span>
        <Icon
          icon="material-symbols:close-rounded"
          size="20"
          color="#797979"
          @click="deleteTheText(index)"
        />
      </div>
      <Input
        v-model:value="inputText"
        :bordered="false"
        :placeholder="placeholder"
        @blur="getInputTest"
        style="flex: 1; min-width: 18%"
      />
    </div>
    <!--底部提示-->
    <span v-show="inputTips !== ''"> {{ inputTips }} </span>
  </div>
</template>

<script setup lang="ts">
  /**
   * inputTitle<string>: 输入框标题
   * inputDataList<[]>: 数据列表
   * placeholder: 输入框的 placeholder
   * getInputDataList 方法: 获取inputDataList输入数据
   * initInputDataList<[]>:初始化数据 对象{text: string}
   * dataChange:改变inputDataList
   * **/
  import { onMounted, ref, watch } from 'vue';
  import Icon from '/@/components/Icon/src/Icon.vue';
  import { Input } from 'ant-design-vue';
  // eslint-disable-next-line vue/require-prop-types
  const props = defineProps([
    'inputTitle',
    'inputTips',
    'placeholder',
    'initInputDataList',
    'dataChange',
  ]);
  //输入数据列表
  let inputDataList = ref<any>([]);
  //input失去焦点前的单词输入
  let inputText = ref<string>('');
  //生命周期
  onMounted(() => {
    if (props.initInputDataList !== undefined) {
      inputDataList.value = props.initInputDataList;
    }
  });
  //组件通信 子传父
  const emits = defineEmits(['getInputDataList']);
  watch(
    () => props.dataChange,
    (nVal) => {
      if (nVal) {
        inputDataList.value = nVal;
      }
    },
  );
  //失去焦点时获取输入框数据
  function getInputTest() {
    // 去除前后空格
    inputText.value.trim();
    if (inputText.value === '') {
      return;
    }
    inputDataList.value.push({
      text: inputText.value,
    });
    // 失去焦点 传递新数据
    emits('getInputDataList', inputDataList.value);
    // 清空
    inputText.value = '';
  }
  //根据下标删除数据列表
  function deleteTheText(index) {
    inputDataList.value.splice(index, 1);
    // 数据修改 传递新数据
    emits('getInputDataList', inputDataList.value);
  }
</script>

<style scoped lang="less">
  .input-list-constant {
    border-bottom: 1px solid #666;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #dfe5ec;
    border-radius: 5px;
    padding: 10px;
    .input-data-list {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: #e0e0e0;
      margin: 5px;
      padding: 5px;
      cursor: pointer;
    }
  }
</style>
